<template>
	<view>
		<view class="tui-center">
			<tuiShareHead></tuiShareHead>
			<!--<book-detail ></book-detail>-->
			<view class="tui-detail-swiper" v-if="imgList.length != 0 || list.video != null">
				<!--轮播图-->
				<view class="tui-banner-swiper" v-if="bannerShow">
					<swiper :autoplay="true" :interval="5000" :duration="150" :circular="true" @change="bannerChange"
					        :style="{ height: scrollH + 'rpx' }">
						<block v-for="(img, imgIndex) in imgList" :key="imgIndex">
							<swiper-item :data-index="imgIndex">
								<image :src="img" class="tui-slide-image" @tap="previewImage(imgIndex)" mode="aspectFill"/>
							</swiper-item>
						</block>
					</swiper>
					<tui-tag type="default" size="small" :text="bannerIndex+1 +'/'+ imgList.length "></tui-tag>
				</view>
				<!--视频-->
				<view class="tui-detail-video" v-else-if="list.video">
					<video id="myVideo"
					       :src="list.video"
					       @error="videoErrorCallback" controls
					></video>
				</view>
				<view class="tui-detail-tag" v-if="list.video && list.pics">
					<tui-tag :type="bannerShow ? 'default' : 'primary'" size="small" text="视频" @tap="bannerShow = !bannerShow"></tui-tag>
					<tui-tag :type="bannerShow ? 'primary' : 'default'" size="small" text="图片" @tap="bannerShow = !bannerShow"></tui-tag>
				</view>
			</view>

			<view class="tui-detail-swiper" v-else>
				<img class="det-img" :src="list.url" alt="">
			</view>

			<view class="tui-detail-box">
				<view class="tui-flex">
					<view>
						<text style="color: orangered;">￥</text>
						<text class="text-prics">{{skuList.discoutPrice?skuList.discoutPrice:skuList.price || 0}}</text>
					</view>
					<view class="disc" v-if="skuList.discoutPrice">
						<del>￥{{skuList.price}}</del>
					</view>
				</view>
				<view>{{list.description}}</view>
				<view class="tui-flex">
					<text class="txt_word" v-if="list.keywords">{{list.keywords}}</text>
					<text class="tui-detail-title">{{list.title}}</text>
				</view>
				<view style="color: #999;padding: 10rpx 0">
					<text style="padding-right: 20rpx">库存：{{skuList.stock}}</text>
					<text>销量：{{skuList.sale || 0}}</text>
				</view>
				<view class="tui-flex" style="font-size: 34rpx;color: #999">
					<view>规格：</view>
					<view class="text-tag">
						<text>
							{{skuList.name}}
						</text>
					</view>
					<view @tap="popupShow = !popupShow">所有规格></view>
				</view>
			</view>

			<view class="tui-nomore-box">
				<tui-nomore text="详情" backgroundColor="#f7f7f7"></tui-nomore>
				<mp-html class="html-detail" :content="list.detail"></mp-html>
				<!--<rich-text space='emsp' :data-nodes="list.detail" :nodes="list.detail"></rich-text>-->
				<!--<view class="html-detail" v-html="list.detail" @click="getImg($event,items,indexs)"></view>-->
			</view>
			<tui-nomore text="已经到最底了" backgroundColor="#f7f7f7"></tui-nomore>
		</view>

		<!--按钮-->
		<pay-btn v-if="list.type == 0"
		         :amount="Number(skuList.discoutPrice?skuList.discoutPrice:skuList.price)"
		         payText="立即预定"
		         title="金额"
		         @imPayment="popupShow = !popupShow"
		></pay-btn>

		<uni-goods-nav v-if="list.type == 1 || list.type == 7" :fill="true" :options="options"
					   :buttonGroup="list.status == 1?buttonGroup:statusGroup"
					   @click="onClick" @buttonClick="buttonClick" />
		<!--<pay-btn v-else
		         :amount="Number(skuList.discoutPrice?skuList.discoutPrice:skuList.price)"
		         payText="立即下单"
		         title="金额"
		         @imPayment="popupShow = !popupShow"
		></pay-btn>-->

		<echone-sku
				:show="popupShow"
				:combinations="list.skuStockList"
				theme-color="#1ac792"
				:combinations-props="combinationsProps"
				:specifications="list"
				:specifications-props="specificationsProps"
				@close="popupShow = false"
				:image="list.url"
				:purchased="purchased"
				:themeColor="themeColor"
				@selectSku="selectSku"
				@cardConfirm="cardConfirm"
				@confirm="handleConfirm"
		></echone-sku>

		<!--<goods-sku-popup
				ref="skuPopup"
				v-model="skuKey"
				border-radius="20"
				:localdata="goodsInfo"
				:mode="skuMode"
				specListName="skuStockList"
				@open="openSkuPopup"
				@close="closeSkuPopup"
				@add-cart="addCart"
				@buy-now="buyNow"></goods-sku-popup>-->

		<!-- 登录提示 -->
		<uni-login-model></uni-login-model>
	</view>
</template>

<script>
    import tuiTag from '@/components/uni-tag/uni-tag.vue'
    import tuiShareHead from '@/components/share-head/share-head.vue'
    import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import gePopup from '@/components/ge-popup/ge-popup.vue'
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'
    import payBtn from '@/components/payBtn/index'
    import tuiNomore from '@/components/tui-nomore/tui-nomore.vue'
    import echoneSku from '@/components/echone-sku/echone-sku.vue'
    import goodsSkuPopup from '@/components/goods-sku-popup/goods-sku-popup.vue'
    import mpHtml from '@/components/mp-html/mp-html'
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	
	export default {
		name: 'ticketDetail',
		components: {
            tuiTag, tuiShareHead, uniIcons, gePopup, uniLoginModel, payBtn,
			tuiNomore, echoneSku, goodsSkuPopup, mpHtml, uniGoodsNav
		},
		data() {
			return {
                popupShow: false,
                skuKey: false,
                skuMode:3,
                specificationsProps: {
                    id: 'spuId',
                    list: 'skuStockList',
                    name: 'title'
				},
                combinationsProps: {
                    id: 'skuId',
                    value: 'name',
                    image: 'image',
                    price: 'price',
                    stock: 'stock',
                    discoutPrice: 'discoutPrice'
				},
                combinations: [],
				list: {
                    categoryId: null,
                    createTime: null,
                    detail: null,
                    goodsAttrList: [],
                    skuStockList: [],
                    isHot: null,
                    name: null,
                    pics: null,
                    price: null,
                    sort: null,
                    status: null,
                    title: null,
                    type: null,
					url: null,
                    description: null,
                    spuId: null,
                    businId: null
				},
                skuList: {
                    ownSpec: '',
                    pics: '',
                    price: '',
                    sale: '',
                    skuCode: '',
                    skuId: '',
                    stock: '',
				},
                scrollH: 560,
                bannerShow: true,
                bannerIndex: 0,
                imgList: [],
                goodsInfo: {},
                id: '',
                options: [
                //  { icon: 'headphones', text: '客服' },
					{icon: 'shop', text: '店铺', infoBackgroundColor:'#007aff', infoColor:"red"},
					{icon: 'cart', text: '购物车', info: 0}
                ],
                buttonGroup: [
                    {text: '加入购物车', backgroundColor: '#ff0000', color: '#fff'},
                    {text: '立即购买', backgroundColor: '#ffa200', color: '#fff'}
                ],
				statusGroup: [
                    {text: '预售', backgroundColor: '#bbb', color: '#fff'},
				],
                themeColor: '#1ac792',
                purchased: false
			}
		},
		onLoad(options) {
		    this.id = options.id
			this.getList(options.id)
			this.cartList()
		},
		methods: {
            getList(id) {
                uni.showLoading()
                uni.request({
                    url: `good/detail/${id}`,
                    method: 'GET',
                    header: {
                        'content-type': 'application/json',
                        'Authorization': 'Bearer ' + uni.getStorageSync('token')
                    },
                    success: (res) => {
                        this.list = res.data.data
						this.goodsInfo = res.data.data
						this.skuList = res.data.data.skuStockList[0]
                        if (this.list.pics) {
                            this.imgList = this.list.pics.split(',')
                        }
                        uni.hideLoading();
                    },
                    fail: (res) => {
                        uni.hideLoading();
                        this.$api.msg(res.data.message)
                    }
                })
            },
            handleConfirm(e, img) {
                console.log(e)
				e = {
					...e,
                    img: img
				}
                if (this.list.type == 0) {
                    uni.navigateTo({
                        // url: `/pagesA/ticket/components/bookTicket?id=${this.id}&skuCode=${e.skuCode})`
                        url: `/pagesA/ticket/components/bookTicket?id=${this.id}&data=${JSON.stringify(e)}`
                    })
				} else {
                    uni.navigateTo({
						url: `/pagesA/ticket/components/placeOrder?id=${this.id}&data=${JSON.stringify(e)}`
					})
				}
			},
            cardConfirm(e, img) {
				let than = this
				let form = {
                    num: e.count,
                    price: e.discoutPrice?e.discoutPrice:e.price,
					pic: img,
					productId: e.skuId,
					productName: e.name
				}
                uni.showLoading()
				this.$api.api('cart.add',form).then(res => {
                    uni.hideLoading();
				    if (res.code == 200) {
                        this.popupShow = false
                        setTimeout(() => { this.$api.msg('加入成功') },600)
                        than.cartList()
                        this.$store.dispatch('getUserInfo')
					} else {
				        this.$api.msg(res.message)
					}
				}).catch(error => {
                    uni.hideLoading();
                    this.$api.msg(error.message)
				})
			},
			cartList() {
                this.$api.api('cart.index').then(res => {
                    if(res.code == 200) {
                        this.options[1].info = res.data.length
					}
				}).catch(error => {
				    this.$api.msg(error.message)
				})
			},
            selectSku(item) {
				this.skuList = item
			},
            getImg($event) {
                console.log($event)
			},
            bannerChange: function(e) {
                this.bannerIndex = e.detail.current;
            },
            previewImage:function(index){
                var i = this.imgList
                uni.previewImage({
                    current: index,
                    urls: i
                })
            },
            imPayment(url) {
                uni.navigateTo({
                    url: url
                })
            },
            onClick (e) {
                // this.popupShow = !this.popupShow
                if (e.content.text == '店铺') {
                    uni.navigateTo({
						url: `/pagesA/store/store?businId=${this.list.businId}`
					})
				} else {
                    uni.navigateTo({url: '/pagesA/card/card?flag=1'})
				}
            },
            buttonClick (e) {
                this.popupShow = !this.popupShow
                if (e.index == 0) {
					this.purchased = true
					this.themeColor = '#ff0000'
				} else {
                    this.purchased = false
                    this.themeColor = '#1ac792'
				}
            },
            // sku组件 开始-----------------------------------------------------------
            openSkuPopup(){
                console.log("监听 - 打开sku组件");
            },
            closeSkuPopup(){
                console.log("监听 - 关闭sku组件");
            },
            findGoodsInfo(){
                return new Promise(function (resolve, reject) {
                    let goodsInfo = {
                        "_id":"002",
                        "name": "迪奥香水",
                        "goods_thumb":"https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
                        "sku_list": [
                            {
                                "_id": "004",
                                "goods_id": "002",
                                "goods_name": "迪奥香水",
                                "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
                                "price": 19800,
                                "sku_name": "50ml/瓶",
                                "sku_name_arr": ["50ml/瓶"],
                                "stock": 100
                            },
                            {
                                "_id": "005",
                                "goods_id": "002",
                                "goods_name": "迪奥香水",
                                "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
                                "price": 9800,
                                "sku_name": "70ml/瓶",
                                "sku_name_arr": ["70ml/瓶"],
                                "stock": 100
                            }
                        ],
                        "spec_list": [
                            {
                                "list": [
                                    {"ysse-color": "20ml/瓶",tt,  ggb},
                                    {"name": "50ml/瓶"},
                                    {"name": "70ml/瓶"}
                                ],
                                "name": "规格"
                            },{
                                "list": [
                                    {"name": "128"},
                                    {"name": "50ml/瓶"},
                                    {"name": "70ml/瓶"}
                                ],
                                "name": "内存"
                            }
                        ]
                    };
                    resolve(goodsInfo);
                });
            },
		}
	}
</script>

<style lang="scss" scoped>
	.html-detail {
		background: #fff;
		padding: 30rpx 0;
	}
.tui-center {
	padding-bottom: 120rpx;
}
	.tui-detail-box {
		margin-top: -50rpx;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 30rpx 30rpx 40rpx;
		position: relative;
		width: 100%;
		z-index: 5;
		.tui-detail-title {
			font-size: 40rpx;
		}
		.txt_word {
			background: orangered;
			color: #fff;
			padding: 0 12rpx 4rpx;
			font-size: 26rpx;
			margin-right: 15rpx;
			border-radius: 10rpx;
		}
		.text-prics {
			font-size: 50rpx;
			color: orangered;
			font-weight: bold;
		}
		.disc {
			padding-left: 20rpx;
			color: #999;
		}
	}

	.tui-detail-swiper {
		position: relative;
		.tui-banner-swiper {
			position: relative;
			background-color: #fff;
			.tui-slide-image {
				width: 100%;
				height: 100%;
				display: block;
				background-color: #fff;
			}
			.uni-tag {
				position: absolute;
				color: #fff;
				bottom: 27%;
				right: -4rpx;
				background: rgba(0, 0, 0, .7);
				border-radius: 30rpx 0 0 30rpx;
				border-color: rgba(0, 0, 0, .4);
				/deep/ .uni-tag--default {
					color: $uni-text-color-inverse;
				}
			}
		}
		.tui-detail-video {
			height: 560rpx;
			#myVideo {
				width: 100%;
				height: 560rpx;
				/deep/ .uni-video-container .uni-video-bar {
					bottom: 54rpx;
				}
			}
		}
		.tui-detail-tag {
			position: absolute;
			bottom: 27%;
			left: 6%;
			display: flex;
			z-index: 99;
			.uni-tag{
				margin: 0 10rpx;
			}
		}
		.det-img {
			width: 100%;
			height: 560rpx;
		}
	}
.text-tag {
	color: #fff;
	flex: 1;
	margin: 0 20rpx;
	text {
		background: #6CB041;
		padding: 4rpx 15rpx 10rpx;
		border-radius: 15rpx;
		font-size: 32rpx;
	}
}
</style>
